<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>用bootstrap画表，并进行验证</title>
	</head>
	<!---引入jquery资源--->
	<script type="text/javascript" src="../js/bootstrap-3.3.7-dist/js/jquery.min.js"></script>
	<!--引入bootstrap的核心js资源文件--->
	<script type="text/javascript" src="../js/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
	<!--引入bootstrap的核心css资源文件--->
	<link rel="stylesheet" type="text/css" href="../js/bootstrap-3.3.7-dist/css/bootstrap.min.css" />

	<!--验证插件-->
	<!--验证表单的配置文件-->
	<script src="../js/jquery.validate/jquery.validate.min.js" type="text/javascript" charset="utf-8"></script>
	<!--验证表单方法的文件-->
	<script src="../js/jquery.validate/additional-methods.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/jquery.validate/messages_zh.min.js" type="text/javascript" charset="utf-8"></script>
	<!--日期插件-->
	<script type="text/javascript" src="../js/layDate-v5.0.85/laydate/laydate.js"></script>
	<script type="text/javascript">
		$(function() {
			//扩展自定义的验证规则
			$.validator.addMethod("isMobile", function(value, element) {
				var length = value.length;
				var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
				return this.optional(element) || (length == 11 && mobile.test(value));
			}, "请正确填写您的手机号码");

			//validate()验证所选的表单	
			$("#myform").validate({
				rules: {
					// 控件的name属性
					exampleInputName: {
						// 验证规则，可以有多个规则进行叠加验证
						required: true, // 必填验证规则
						rangelength: [6, 12] // 长度验证
					},
					exampleInputPassword1: {
						required: true,
						rangelength: [6, 12]
					},
					exampleInputEmail1: {
						required: true,
						email: true // 验证邮箱格式是否正确
					},
					exampleInputTel: {
						required: true,
						isMobile: ["element"] // 自定义的验证规则
					},
					inlineRadioOptions: {
						required: true
					},
					exampleInputBirthday: {
						required: true
					},
					inlineCheckbox: {
						required: true,
						minlength: "2" //至少选两项
					},
					exampleInputHeadPortrait: {
						extension: 'jpg|jpeg|png|gif' // 后缀扩展名的格式验证
					},
					txtIntroduce: {
						rangelength: [30, 50]
					}
				}
			});
		});
	</script>

	<body>
		<!--
        	作者：406473754@qq.com
        	时间：2017-12-04
        	描述：流式布局
        -->
		<form role="form" id="myform">
			<div class="container-fluid">
				<div class="row">
					<div class="col-md-4">
						<div class="form-group">

							<label for="exampleInputName">
						Account
					</label>
							<input class="form-control" id="exampleInputName" name="exampleInputName" type="text">
						</div>
						<!--密码-->
						<div class="form-group">

							<label for="exampleInputPassword1">
						Password
					</label>
							<input class="form-control" id="exampleInputPassword1" name="exampleInputPassword1" type="password">
						</div>
					</div>
					<div class="col-md-4">
						<!--邮箱-->
						<div class="form-group">

							<label for="exampleInputEmail1">
						Email address
					</label>
							<input class="form-control" id="exampleInputEmail1" name="exampleInputEmail1" type="email">
							<!--性别-->
							<div class="form-group">

								<label for="exampleInputSex">
						Sex
					</label>
								<label class="radio-inline">
  								<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 男
								</label>
								<label class="radio-inline">
  								<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 女
								</label>
								<label class="radio-inline">
  								<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 未知
								</label>
							</div>
							<!--兴趣爱好-->
							<div class="form-group">

								<label for="exampleInputInt">
						Interest
					</label>
								<label class="checkbox-inline">
 							    <input type="checkbox" id="inlineCheckbox1" name="inlineCheckbox" value="option1"> 打游戏
								</label>
								<label class="checkbox-inline">
  								<input type="checkbox" id="inlineCheckbox2" name="inlineCheckbox" value="option2"> 写代码
								</label>
								<label class="checkbox-inline">
  								<input type="checkbox" id="inlineCheckbox3" name="inlineCheckbox" value="option3"> 看书
								</label>
							</div>
						</div>
						<div class="col-md-4">
							<!--电话-->
							<div class="form-group">

								<label for="exampleInputTel">
						Tel
					</label>
								<input class="form-control" id="exampleInputTel" name="exampleInputTel" type="text">
							</div>
							<!--出生日期-->
							<div class="form-group">

								<label for="exampleInputBirthday">
						Birthday
					</label>
								<input class="form-control" id="exampleInputBirthday" name="exampleInputBirthday" type="text">
								<!-- 改成你的路径 -->
								<script>
									//执行一个laydate实例
									laydate.render({
										elem: '#exampleInputBirthday' //指定元素
									});
								</script>
							</div>

						</div>
					</div>
					<div class="row">
						<!--头像-->
						<div class="form-group">

							<label for="exampleInputHeadPortrait">
						Head portrait
					</label>
							<input id="exampleInputHeadPortrait" name="exampleInputHeadPortrait" type="file">
							<p class="help-block">
								Example block-level help text here.
							</p>
						</div>
						<!--自我介绍-->
						<div class="form-group">

							<label for="exampleInputFile">
						Introduce oneself to
					</label>
							<!--<input class="form-control" id="exampleInputFile">-->
							<textarea rows="8" cols="40" id="txtIntroduce" name="txtIntroduce">
						</textarea>
						</div>
						<div class="row">
							<div class="checkbox">

								<label>
						<input type="checkbox" > Check me out
					</label>
							</div>
							<input type="submit" name="" id="" value="Submit" align="center" />
							</button>
						</div>
		</form>
	</body>

</html>